<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>小团体课</title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="icon/iconfont.css"/>
    <link rel="stylesheet" href="css/com-footer.css"/>
    <style>
        .top-date{}
        .top-date table{width: 100%;max-width: 100%;position: relative;background-color: #18171c;}
        .top-date td{padding: 0.25rem;}
        .top-date td.on{background-color: #fbb701;}
        .top-date a{color: #f1f1f1;font-size: 12px;text-align: center;}
        .top-date a .today{vertical-align: middle;display: block;}
        .top-date a .date{display: block;}
        .top-date a .day-of-week{display: block;margin-top: 0.25rem;}

        .title{overflow: hidden;padding: 0.5rem;}
        .title .name{float: left;font-size: 0.6rem;}
        .title .map{float: right;font-size: 0.6rem;color: #8f8f94;}
        .title .map i{font-size: 0.6rem;margin-right: 0.3rem;}

        .class-list{padding:0.25rem 0.5rem;background-color: #323238;}
        .class-list li{overflow: hidden;padding: 0.25rem 0;}
        .class-list li .img-box{float: left;position: relative;}
        .class-list li .img-box img{display: block;width: 6rem;height: 4.25rem;}
        .class-list li .middle-word{float: left;margin-left: 0.5rem;}
        .class-list li .middle-word h1{font-size: 0.7rem;color: #fff;font-weight: normal;margin-top: 0.5rem;}
        .class-list li .middle-word h2{font-size: 0.6rem;color: #999;font-weight: normal;margin-top: 0.3rem;}
        .class-list li .middle-word .progress-box{margin-top: 0.3rem;overflow: hidden;}
        .class-list li .middle-word .progress-box .price{float: left;font-size: 0.6rem;color: #ff3d3d;line-height: 1rem;}
        .class-list li .middle-word .progress-box .progress{float: left;margin-left: 0.5rem;background-color: #a77d0e;
            width: 3rem;;height: 1rem;border-radius: 1rem;position: relative;padding: 0.1rem;}
        .class-list li .middle-word .progress-box .progress p{color: #fff;font-size: 0.6rem;position: absolute;left: 0;top: 0;width: 100%;line-height: 1rem;text-align: center;}
        .class-list li .middle-word .progress-box .progress .progress-bar{width: 40%;height: 0.8rem;background-color: #ffba00;border-radius: 1rem;}
        .class-list li .btn{float: right;display: table;height: 4.25rem;}
        .class-list li .btn div{display: table-cell;vertical-align: middle;}
        .class-list li .btn div button{font-size: 0.6rem;-webkit-appearance: none;background-color: #fbb701;border: none;
            color: #fff;padding: 0.4rem 1.2rem;border-radius: 0.2rem;}
        .class-list li .btn div p{text-align: center;font-size: 0.6rem;margin-top: 0.2rem;}
        .class-list li .over div button{background-color: #323239;border: 1px solid #555;}
    </style>
</head>
<body>
    <div class="container">
        <div class="top-date">
            <table>
                <tbody>
                <tr>
                    <td class="on">
                        <a href="">
                            <span class="today">今日</span>
                        </a>
                    </td>
                    <td>
                        <a href="">
                            <span class="date">03.08</span>
                            <span class="day-of-week">周二</span>
                        </a>
                    </td>
                    <td>
                        <a href="">
                            <span class="date">03.09</span>
                            <span class="day-of-week">周三</span>
                        </a>
                    </td>
                    <td>
                        <a href="">
                            <span class="date">03.10</span>
                            <span class="day-of-week">周四</span>
                        </a>
                    </td>
                    <td>
                        <a href="">
                            <span class="date">03.11</span>
                            <span class="day-of-week">周五</span>
                        </a>
                    </td>
                    <td>
                        <a href="">
                            <span class="date">03.12</span>
                            <span class="day-of-week">周六</span>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="title">
            <p class="name">work+私教馆</p>
            <a class="map" href=""><i class="iconfont icon-zuobiao"></i>查看地图</a>
        </div>
        <div class="class-list">
            <ul>
                <li>
                    <div class="img-box">
                        <a href="team_class_detail.html">
                            <img class="bg-img" src="img/group_img01.png" alt=""/>
                        </a>
                    </div>
                    <div class="middle-word">
                        <h1>work+私教馆年卡</h1>
                        <h2>3月15日 12:00</h2>
                        <div class="progress-box">
                            <span class="price">￥59</span>
                            <div class="progress">
                                <p>4/12</p>
                                <div class="progress-bar"></div>
                            </div>
                        </div>
                    </div>
                    <div class="btn">
                        <div>
                            <button>预约</button>
                            <p>3人开团</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="img-box">
                        <a href="team_class_detail.html">
                            <img class="bg-img" src="img/group_img01.png" alt=""/>
                        </a>
                    </div>
                    <div class="middle-word">
                        <h1>work+私教馆年卡</h1>
                        <h2>3月15日 12:00</h2>
                        <div class="progress-box">
                            <span class="price">￥59</span>
                        </div>
                    </div>
                    <div class="btn over">
                        <div>
                            <button>结束</button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

<footer class="common-footer-box">
    <div class="common-footer clear">
        <a href="index.html">
            <i class="iconfont icon-changguan"></i>
            <span>附近场馆</span>
        </a>
        <a class="on" href="#">
            <i class="iconfont icon-mukeappicon03"></i>
            <span>小团体课</span>
        </a>
        <a href="personal_guide.html">
            <i class="iconfont icon-jianshenjiaolian"></i>
            <span>私人指导</span>
        </a>
        <a href="all_lesson.html">
            <i class="iconfont icon-iconfontuser"></i>
            <span>我的课程</span>
        </a>
    </div>
</footer>
</body>
</html>